<template>
  <div class="details">
    <van-nav-bar title="测评简介" left-arrow fixed @click-left="onClickLeft" />

    <div class="top-bground">
      <img :src="projectItem.classesName" style="width: 100%; height: 100%" />
    </div>

    <div class="top-box">
      <div class="ptitle">{{ projectItem.projectName }}</div>
    </div>

    <div class="content">
      <span class="titleDsc">测评指导语</span>

      <p class="desc"></p>
    </div>
    <div v-if="loading" class="stick">
      <div class="btn-wrapper">
        <van-button
          v-if="reportBtnVisible"
          type="primary"
          class="btn"
          block
          @click="goToReport"
        >
          查看测评结果
        </van-button>
        <van-button
          v-if="startBtnVisible"
          type="primary"
          class="btn"
          block
          @click="onStart"
        >
          开始测评
        </van-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  watch,
  onActivated,
  computed,
  onBeforeMount,
} from 'vue'
import head from './head.png'
import { useRouter } from 'vue-router'
import { getEInquiryList } from '/@/api/expert/list'
import { geMeasureList } from '/@/api/home/home'
import { useStore } from '/@/store'
import axios from '/@/api/axios'
import { Project } from '/@/types/Project'
import { getUserInfo } from '/@/util/business-util'

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const styleObject = reactive({ background: '' })
    const headPng = ref(head)
    const router = useRouter()
    const query = router.currentRoute.value.query
    const expertList: any[] = reactive([])
    const projectItem = reactive({} as Project)
    const expertCategoryId = query.gaugeTypeId
    const stickLoading = ref(false)
    const isBackRouter = query.isBackRouter
    getEInquiryList(1, 100, {
      state: 1,
      expertCategoryId: expertCategoryId,
    }).then((res) => {
      const data = res.data.data.records
      data.forEach((item: any) => {
        expertList.push(item)
      })
    })
    geMeasureList(1, 5, { projectId: query.projectId }).then((res) => {
      const data = res.data.data.records[0]
      Object.assign(projectItem, data)
      styleObject.background = projectItem.classesName
    })

    const { commit, state } = useStore()
    const answerList = ref<any[]>([])

    let userInfo: any | null = ref(null) // 当前用户信息
    onBeforeMount(async () => {
      // 获取用户信息
      userInfo.value = await getUserInfo(
        commit,
        state,
        state.user.userId,
        false
      )
    })

    watch(projectItem, () => {
      const elementCreate = document.createElement('div')
      elementCreate.innerHTML = (projectItem as any).accessRemark
      document.querySelector('.desc')!.appendChild(elementCreate)
    })

    const {
      loading,
      isTested,
      userProjectId,
      startBtnVisible,
      reportBtnVisible,
    } = useIsTested(props)

    return {
      loading,
      stickLoading,
      answerList,
      headPng,
      expertList,
      projectItem,
      styleObject,
      isTested,
      startBtnVisible,
      reportBtnVisible,
      onClickLeft() {
        if (isBackRouter) {
          return history.back()
        }
        router.push({ name: 'Classify' })
      },
      onStart() {
        router.push({
          name: 'EvaluateDetails',
          query: { projectId: props.projectId },
        })
      },
      goToReport() {
        if (userInfo.value.postName.includes('心理老师')) {
          router.push({
            name: 'Todo',
            query: {},
          })
        } else {
          router.push({
            name: 'EvaluateResult',
            query: { userProjectId: userProjectId.value },
          })
        }
      },
    }
  },
})

function useIsTested(props: any) {
  const isTested = ref(false)

  const { state } = useStore()

  const userProjectId = ref('')

  let loading = ref(false)

  watch(
    () => props.projectId,
    async (pid) => {
      getData(pid)
    },
    { immediate: true }
  )

  onActivated(() => {
    getData(props.projectId)
  })

  async function getData(pid: number) {
    const {
      data: {
        data: { records },
      },
    } = await getProjectList(state.user.userId, pid)
    isTested.value = records.length > 0

    if (isTested.value) {
      userProjectId.value = records[0].id
    }

    loading.value = true
  }

  return {
    loading,
    isTested,
    userProjectId,
    startBtnVisible: computed(() => {
      return !isTested.value
    }),
    reportBtnVisible: computed(() => {
      return isTested.value
    }),
  }
}

function getProjectList(userId: number, projectId: number) {
  const url = `/api/blade-measure/measure/userprojectgauge/page?current=1&size=500&includeId=${userId}&projectId=${projectId}`

  return axios.get(url)
}
</script>

<style lang="less" scoped>
.details {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 50px;

  /deep/ .van-cell__title {
    font-size: 15px;
    color: #0387cf;
  }
  /deep/ .van-card__title {
    font-size: 13px;
    font-weight: bold;
  }
  .desc {
    font-size: 14px;
    color: #535353;
    line-height: 20px;
  }
  .titleDsc {
    color: #fff;
    background-color: #3aa7d9;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
  }
}
.ptitle {
  color: #0387cf;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.top-bground {
  width: 100%;
  height: 220px;
  margin-top: -10px;
  position: relative;
  z-index: 0;
}
.stick {
  width: 100%;
  position: fixed;
  padding: 10px 0;
  bottom: 50px;
  background: white;
}
.top-box {
  position: relative;
  z-index: 0;
  margin-top: -24px;
  border-radius: 24px 24px 0 0;
  background-color: white;
  padding: 36px 12px 12px 12px;
}
.content {
  background-color: white;
  font-size: 18px;
  padding: 12px;
  margin-bottom: 110px;
}

.btn-wrapper {
  display: flex;
}

.btn {
  width: 94%;
  margin: 0 auto;
  border-radius: 5px;
}
</style>
